<template>
  <div class="life">
      <h3>生命周期 -- {{ num }}</h3>
      <button :disabled="flag" @click="num += 1">+++</button>
      <!-- <p ref="ppp">我是Dom结构</p> -->
  </div>
</template>

<script>
export default {
    data() {
        return {
            num: 999,
            list: [],
            flag: false,
            timer: null
        }
    },
    methods: {
        fn() {
            console.log('fn')
        }
    },
    computed: {
        newNum() {
            return this.num + '1'
        }
    },

    //1. 初始化之前(一般不使用)
    beforeCreate() {
        console.log(this.num, this.fn, this.newNum)
    },
    //2. 发起请求   调用初始化函数
    created() {
        // this.timer = setInterval(() => {
        //     console.log(1)
        // }, 1000)
        console.log(this.num, this.fn)

        // this.$bus.on('a', () => {
            
        // })
        // console.log(this.$refs)
    },
    //3. 准备挂载Dom结构 (一般不使用)
    beforeMount() {
        
    },
    // 4. Dom结构挂载完毕  操作Dom结构
    mounted() {
        // this.$refs.ppp.innerHTML = "11111111111"
        // debugger
    },
    // 5. 数据本身已经进行更新（视图没有进行更新）
    beforeUpdate() {
        // console.log(this.num)
        // debugger
    },
    // 6. 数据和视图都更新完成
    updated() {
        if (this.num === 1010) {
            this.flag = true
        }
        // debugger
    },
    // 7. 销毁之前
    beforeDestroy() {
        // 清除定时任务
        clearInterval(this.timer)
        // 
        // this.$bus.off('a')
        console.log('我准备销毁')
    },
    // 8. 销毁完成
    destroyed() {
        console.log('销毁完成')
    }
}
</script>

<style>

</style>